<template>
  <div class="cc-year-dialog row"
  v-if="(local.type==='year' || local.type==='yearmonth') && !local.showMonth">
    <div class="row items-center">
      <q-btn icon="mdi-chevron-left" dense outline flat class="q-ma-sm" @click="changePage(-21)" />
    </div>
    <div class="col" v-for="col in colList" :key="col">
      <q-btn
        v-for="row in rowList"
        :key="row"
        :label="(start+col*7+row)"
        dense
        outline
        flat
        class="cc-year-btn"
        :class="local.year === start+col*7+row?'bg-primary text-white':''"
        @click="selYear(start+col*7+row)"
      />
    </div>
    <div class="row items-center">
      <q-btn icon="mdi-chevron-right" dense outline flat class="q-ma-sm" @click="changePage(21)"/>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    local: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      start: 2020,
      colList: [0, 1, 2],
      rowList: [0, 1, 2, 3, 4, 5, 6],
    };
  },
  created() {

  },
  mounted() {
    this.start = this.local.year - 10;
  },
  methods: {
    selYear(v) {
      this.local.year = v;
      this.$emit('calcText');
      if (this.local.type === 'year') {
        this.$emit('closeSelect');
      }
    },
    changePage(v) {
      this.start += v;
    },
  },
  watch: {
  },
};
</script>

<style scoped lang="stylus">
.cc-year-dialog
  width 270px
  height 270px
  .cc-year-btn
    margin 3px
    font-weight 400
</style>
